<template>
  <div>
    <div @click="getMessage" class="message-icon">
      <el-badge  :value="isNotReadCount">
        <i class="el-icon-chat-dot-round message-bell"></i>
      </el-badge>
      <div class="message-prompt">
        <div class="message-header">消息提醒</div>
        <div v-if="!hasMessage" class="no-message">暂无消息</div>
        <div v-if="hasMessage" class="message-list">
          <div class="message-item" v-for="message in isNotReadList">
            {{message.content}}
          </div>
        </div>

      </div>

    </div>

  </div>

</template>

<script>
import {listIsNotRead, updateAllIsRead} from "@/api/gaoxin/message";
import {getUserProfile} from "@/api/system/user";

export default {
  name: "message",
  data() {
    return {
      isNotReadList: [],
      isNotReadCount: null,
      userId: null,
      hasMessage: false,
    }
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    getMessage() {
      //获取未读数据
      this.hasMessage = false;
      //点击取消未读数
      this.isNotReadCount = null;
      console.log()
      //修改消息为已读
      getUserProfile().then(res => {
        let userId = res.data.userId
        updateAllIsRead(userId).then(res => {
          console.log("updateAllIsRead",res);
        });
      });
      //跳转到我的任务
      this.$router.push("/execute/myTask")
    },

    getIsNotReadList(userId) {
      const _this = this;
      //获取未读数据
      listIsNotRead(userId).then(res => {
        _this.isNotReadList = res.isNotRead;
        console.log(res)
        console.log("_this.isNotReadList",_this.isNotReadList)
        let isNotReadCount = this.isNotReadList.length;
        console.log("isNotReadCount",isNotReadCount)
        if(isNotReadCount == 0) {
          _this.isNotReadCount = null;
        } else {
          _this.isNotReadCount = isNotReadCount;
          _this.hasMessage = true;
        }
      });
    },

    getUserInfo() {
      getUserProfile().then(res => {
        let userId = res.data.userId
        this.getIsNotReadList(userId);
      })
    }

  }
}
</script>

<style scoped>
.message-bell {
  position: relative;
  top: -12px;
  right: 0px;
  font-size: 24px;
}

.message-header {
  background-color: #FFFFFF;
  height: 33px;
  text-align: center;
  line-height: 30px;
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid #bab9b9;
  display: none;

}

.no-message {
  text-align: center;
  display: none;
}

.message-list {
  max-height: 200px;
  font-size: 16px;
  text-align: center;
  margin: auto;
  display: none;
  overflow: auto;
}

.message-item{
  /*border-bottom: 1px solid #afadae;*/
}

.message-item:hover {
  background-color: #e8f4ff;
  color: #46a6ff;
}

/*.gap {*/
/*  background-color: darkblue;*/
/*  visibility: hidden;*/
/*  height: 10px;*/
/*}*/

/*.message-info {*/

/*}*/

.message-prompt {
  /*display: none;*/
  position: fixed;
  width: 200px;
  /*max-height: 200px;*/
  background-color: #FFFFFF;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  text-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  top: 50px;
  right: 100px;
  z-index: 9999;
  font-size: 16px;
  /*text-align: center;*/
  /*margin: auto;*/
  /*display: none;*/
  /*overflow: auto;*/

}

.message-icon:hover .message-header{
  display: block;
}

.message-icon:hover .no-message{
  display: block;
}

.message-icon:hover .message-list{
  display: block;
}

.message-prompt:hover {
  display: block;
}

/*::-webkit-scrollbar {*/
/*  width: 200px;          !* 纵向滚动条 宽度 *!*/
/*  height: 15px;         !* 横向滚动条 高度 *!*/
/*  background: rgba(0, 0, 0, 0.2);   !* 整体背景 *!*/
/*  border-radius: 10px;  !* 整体 圆角 *!*/
/*}*/

div::-webkit-scrollbar {
  width: 4px;
}
div::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  opacity: 0.2;
  background: fade(@primary-color, 60%);
}
div::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: fade(@primary-color, 30%);
}


.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
